<template>
  <div :style="{width:width,height:height+'px'}" class="video">
    <video ref="video" class="video-js" controls preload="auto" :width="width" :height="height-64">
      <!-- <source :src="src" type="video/mp4" /> -->
      <source :src="src" type="application/x-mpegURL" />
    </video>
  </div>
</template>
<script>
import videojs from 'video.js'
export default {
  props: {
    width: [Number, String],
    height: [Number, String],
    src: String
  },
  mounted() {
    this.video = videojs(this.$refs.video)
    this.video.play()
  },
  watch: {
    //监听value的变化，进行相应的操作即可
    src(newValue) {
      this.$nextTick(() => {
        if (this.video) {
          this.video.src({ src: newValue, type: "application/x-mpegURL" })
          this.video.play()
        }
      });
    }
  },
  methods: {
    pause() {
      this.video.pause()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~video.js/dist/video-js.min.css";

/deep/ {
  .video-js {
    position: static;
  }

  .vjs-time-control {
    display: block;
  }

  .vjs-remaining-time {
    display: none;
  }

  .video-js .vjs-volume-panel .vjs-volume-control {
    margin-top: 6px;
    width: 115px !important;
    height: 7px !important;
    opacity: 1 !important;
    background: rgba(215, 228, 255, 1);
    border-radius: 3px;
  }

  .vjs-picture-in-picture-control {
    display: none;
  }

  .vjs-current-time {
    left: 59px;
    text-align: right;
    width: 50px;
  }

  .vjs-time-divider {
    left: 114px;
    width: fit-content;
    min-width: fit-content;
    width: 4px;
  }

  .vjs-duration {
    left: 122px;
    width: 50px;
    text-align: left;
  }

  .vjs-current-time,
  .vjs-time-divider,
  .vjs-duration {
    white-space: nowrap;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    padding: 0;
    height: 24px;
    position: absolute;
    bottom: 24px;
  }

  .vjs-big-play-button {
    /* @include wh(140, 140);
    @include bg('~@/assets/images/icons/s4_1_3abofang@2x.png'); */
    border: 0;
    background-color: transparent !important;
    left: 50%;
    top: 50%;
    margin-left: -35px;
    margin-top: -35px;

    .vjs-icon-placeholder {
      display: none;
    }
  }

  .vjs-fullscreen-control {
    position: absolute;
    right: 16px;
    bottom: 16px;
    height: 21px;
    width: 20px;

    /* @include bgwh('~@/assets/images/icons/s4_1_3aquanping@2x.png', 42, 40); */
    .vjs-icon-placeholder {
      display: none;
    }
  }

  .vjs-volume-bar.vjs-slider-horizontal {
    margin: 0 !important;
    height: 8px !important;
    width: 115px !important;
    background: linear-gradient(
      225deg,
      rgba(34, 115, 232, 1) 0%,
      rgba(54, 170, 255, 1) 100%
    );
    border-radius: 3px;
  }

  .vjs-mute-control.vjs-control.vjs-button {
    /* @include bgwh('~@/assets/images/icons/s4_1_3asy@2x.png', 42, 42); */
    .vjs-icon-placeholder {
      display: none;
    }
  }

  .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
    height: 7px !important;
    background: linear-gradient(
      225deg,
      rgba(34, 115, 232, 1) 0%,
      rgba(54, 170, 255, 1) 100%
    );
    border-radius: 3px;

    &::before {
      //   content: '';
      width: 14px;
      height: 14px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      top: -3px;
      border-radius: 50%;
    }
  }

  .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal {
    width: 146px !important;
    position: absolute;
    right: 118px;
    bottom: 15px;
    height: 21px;
    transform: none !important;
  }

  .vjs-control-bar {
    background: transparent;
    position: static;
  }

  .vjs-play-control.vjs-control.vjs-button {
    position: absolute;
    bottom: 12px;
    left: 8px;
    width: 40px;
    height: 30px;

    &.vjs-paused {
      /* @include bgwh('~@/assets/images/icons/s4_1_3abf@2x.png', 34, 46); */
      .vjs-icon-placeholder {
        display: none;
      }
    }
  }

  .vjs-progress-control.vjs-control {
    width: 100%;
    position: absolute;
    left: 0;
    margin: 0;
    bottom: 52px;
    height: 12px;

    .vjs-progress-holder.vjs-slider.vjs-slider-horizontal {
      background: rgba(216, 216, 216, 1);
      margin: 0;
      box-shadow: none;
      height: 12px;
    }

    .vjs-play-progress:before {
      content: "";
      border-radius: 50%;
      top: -1px;
      width: 14px;
      height: 14px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    }

    .vjs-play-progress.vjs-slider-bar {
      height: 12px;
      box-shadow: none;
      background: linear-gradient(
        225deg,
        rgba(34, 115, 232, 1) 0%,
        rgba(54, 170, 255, 1) 100%
      );
    }
  }
}

.video {
  position: relative;
  background: rgb(30, 30, 30);
}
</style>